<template>
    <div class="ratings" ref="ratings" >
          <div class="ratings-content">
                <div class="overview">
                      <div class="overview-left">
                           <h1 class="score">{{seller.score}}</h1>
                           <div class="title">综合评分</div>
                            <div class="rank">高于周边商家{{seller.rankRate}}%</div>
                      </div>
                      <div class="overview-right">
                              <div class="score-wrapper">
                                    <span class="title">服务态度</span>
                                    <star :size="36" :score="seller.serviceScore"></star>
                                    <span class="score">{{seller.serviceScore}}</span>
                              </div>

                              <div class="score-wrapper">
                                <span class="title">商品评分</span>
                                <star :size="36" :score="seller.foodScore"></star>
                                <span class="score">{{seller.foodScore}}</span>
                              </div>
                               <!--送达时间-->
                              <div class="delivery-wrapper">
                                 <span class="title">送达时间</span>
                                 <span class="delivery">{{seller.deliveryTime}}分钟</span>
                              </div>

                      </div>

                </div>
                <split></split>

            <ratingselect :select-type="selectType"
                          :only-content="onlyContent"
                          :desc="desc"
                          :ratings="ratings"
                          @setselectType="setselectType"
                          @changeonlyContent="changeonlyContent"></ratingselect>

            <div class="rating-wrapper">
                  <ul v-show="ratings && ratings.length">
                      <li v-show="needShow(rating.rateType,rating.text)"  v-for="rating in ratings" class="border-1px rating-item">
                           <div class="avatar">
                               <img width="28" height="28" :src="rating.avatar">
                           </div>
                            <div class="content">
                                  <h1 class="name">{{rating.username}}</h1>
                                  <div class="star-wrapper">
                                       <star class="star" :size="24" :score="rating.score"></star>
                                       <span class="delivery" v-show="">{{rating.rateTime}}</span>
                                  </div>
                                   <p class="text">{{rating.text}}</p>
                                   <div class="recommend" v-show="rating.recommend.length">
                                          <span class="iconfont icon-dianzan"></span>
                                          <span class="item" v-for="item in rating.recommend">{{item}}</span>
                                   </div>
                                   <div class="time">
                                       {{rating.rateTime|formatDate}}
                                   </div>
                            </div>
                      </li>
                  </ul>
            </div>
          </div>
    </div>
</template>

<script>
  import BScroll from 'better-scroll';
  import star from '@/components/star/star'
  import {formatDate} from "../../common/js/date";
  import ratingselect from '@/components/ratingselect/ratingselect';
  import split from '@/components/split/split';
  const POSITIVE=0;
  const NEGATIVE=1;
  const ALL=2;
  const ERR_OK=0;
    export default {
        name: "ratings",
        components:{
          star,
          ratingselect,
          split
        },
      props:{
        seller:{
          type:Object
        }
      },
      data(){
        return{
          ratings:[],
          showFlag:false,
          selectType:ALL,
          onlyContent: true,
          desc:{
            all:'全部',
            positive:'推荐',
            negative:'吐槽'
          }
        }
      },

      methods:{
        needShow(type,text){
          if(this.onlyContent&&!text){
            return false;
          }
          if(this.selectType==ALL){
            return true;
          }else{
            return type===this.selectType;
          }
        },
        changeonlyContent(){
          this.onlyContent=!this.onlyContent;
        },
        setselectType(type){
          this.selectType=type;
        }
      },
      filters:{
        formatDate(time){
          let date=new Date(time);
          return formatDate(date,'yyyy-MM-dd hh:mm');
        }
      },
      created(){

        this.$ajax.get("/api/ratings").then((response)=>{
          if(response.data.errno===ERR_OK){
                this.ratings=response.data.data;
                console.log(this.goods);

                this.$nextTick(()=>{
                  console.log(this.$refs.ratings)
                  this.scroll=new BScroll(this.$refs.ratings,{click:true});
                })

          }

        })
          .catch(error=>{
            console.log(error)
          })
      }

    }
</script>

<style lang="less" scoped>
  @import "../../common/stylus/mlxin";
    .ratings{
         position: absolute;
         top:174px;
         bottom: 0;
         left:0;
         width:100%;
         overflow: hidden;
      .overview{
         display: flex;
         padding: 18px 0;
        .overview-left{
            flex:0 0 137px;
            padding: 6px 0;
            width: 137px;
            border-right: 1px solid #d1d4d8;
            text-align: center;
            @media only screen and (max-width:320px){
                    flex: 0 0 120px;
                    width: 120px;
              }
             .score{
                margin-bottom: 6px;
                line-height: 28px;
                font-size: 24px;
                color:rgba(255,153,0);
             }
             .title{
               margin-bottom: 8px;
               line-height: 12px;
               font-size: 12px;
               color: rgb(7,17,27);
             }
            .rank{
                 padding-bottom: 6px;
                  line-height: 10px;
                   font-size: 10px;
                   color: rgb(147,153,159);
            }

        }
        .overview-right{
          flex:1;
          padding:6px 0 6px 24px;
          @media only screen and (max-width:320px){
            padding-left: 6px;
          }
           .score-wrapper{
                 margin-bottom: 8px;
                 font-size: 0;
                 .title{
                   display: inline-block;
                   line-height: 18px;
                   vertical-align: top;
                   font-size: 12px;
                   color: rgb(7,17,27)
                 }
                 .star{
                   display: inline-block;
                   margin: 0 12px;
                   vertical-align: top;
                 }
                 .score{
                      display: inline-block;
                      line-height: 18px;
                      vertical-align: top;
                      font-size: 12px;
                 }
           }
          .delivery-wrapper{
               font-size: 0;
              .title{
                line-height: 18px;
                font-size: 12px;
                color: rgb(7,17,27)
              }
            .delivery{
               margin-left: 12px;
               font-size: 12px;
               color: rgb(147,153,159);
            }
          }
        }

      }
      .rating-wrapper{
        padding: 0 18px;
         .rating-item{
           display: flex;
           padding: 18px 0;
            .avatar{
               flex:0 0 28px;
               width: 28px;
               margin-right: 12px;
               img{
                  border-radius: 50%;
               }
            }
           .content{
              position: relative;
             flex:1;
             .name{
                margin-bottom: 4px;
                 line-height: 12px;
                 font-size: 10px;
                 color: rgb(7,17,27);
             }
             .star-wrapper{
                 margin-bottom: 6px;
                 font-size: 0;
                 .star{
                      display: inline-block;
                      margin-right: 6px;
                      vertical-align: top;
                 }
               .delivery{
                 display: inline-block;
                 margin-right: 6px;
                 vertical-align: top;
               }
             }
             .text{
                line-height: 18px;
                margin-bottom: 8px;
                color:rgb(7,17,27);
                font-size: 12px;
             }
              .recommend{
                line-height: 16px;
                font-size: 0;
                .icon-dianzan,.item{
                  display: inline-block;
                  margin: 0 8px 4px 0;
                  font-size: 9px;
                }
                .icon-dianzan{
                  color:rgb(0,160,220)
                }
                .item{
                      padding: 0 6px;
                      border:1px solid rgba(77, 85, 93, 0.2);
                      border-radius: 1px;
                      color:rgb(147,153,159);
                      background: #fff;
                }

              }
             .time{
               position: absolute;
               top:0;
               right: 0;
             }
           }
         }
      }
    }
</style>
